<template>
  <!--  数据可视化页面-->
  <div class="board">
    <!-- 标题 -->
    <div class='board_header'>
      <dv-decoration-3 style="width:30vw;height:50px;display: inline-block"/>
      <el-button type="text" style="margin: 0 4vw" @click="adduu(1)">
        天空之桥研学数据可视化
      </el-button>
            <div @click="adduu(-0.01)" style="padding-top: 40px;margin-right: 20px" class="temo_humi"> {{'温度：'+temp+'℃；湿度：'+humi+'%RH'}}</div>
      <dv-decoration-3 style="width:18vw;height:50px;display: inline-block"/>
    </div>
    <el-row :gutter="10">
      <el-col :span="12" v-for="(monitor,index) in monitorList" :key="index">
        <dv-border-box-8
          :dur="index+3"
          style="height: 44vh"
          :color="['#006efd', '#3BD5FD']"
          backgroundColor="rgba(23, 36, 63, 0.9)">
          <model-item :key="index" :ref="'modelItem'+monitor.monitorType" :monitorInfo="monitor"></model-item>
        </dv-border-box-8>
      </el-col>
    </el-row>
    <div>
      <div style="font-size:0.85rem;color: #FFFFFF;width: 100vw;text-align: center;line-height: 1vh">Copyright © 2024
        贵州嵘屹科技有限公司.技术支持
      </div>
    </div>
  </div>
</template>

<script>
  import {
    openApiWorkPointInfo,
  } from '@/services/model/project-info'
  import {
    borderBox8,
    borderBox13,
    scrollBoard,
    decoration10,
    scrollRankingBoard,
    decoration1,
    decoration3,
    decoration12,
    decoration2,
    decoration7,
    loading
  } from '@jiaminghi/data-view'
  import Vue from 'vue'
  import ModelItem from "./monitor-point/monitor-item/model-item";
  import {Message} from "element-ui";

  Vue.use(loading)
  Vue.use(borderBox13)
  Vue.use(borderBox8)
  Vue.use(scrollBoard)
  Vue.use(decoration10)
  Vue.use(scrollRankingBoard)
  Vue.use(decoration1)
  Vue.use(decoration3)
  Vue.use(decoration2)
  Vue.use(decoration12)
  Vue.use(decoration7)
  export default {
    components: {ModelItem},
    data() {
      return {
        temp: '',
        humi: '',
        count: 0,
        monitorList: [],
        ing:368.6,
      }
    },
    computed: {},
    methods: {
      adduu(num){
        // this.ing = this.ing +num
        // this.$refs[`modelItem3`][0].addData(3, {distance:this.ing }, new Date().getTime())
      },
      async openApiWorkPointInfo() {
        let {data} = await openApiWorkPointInfo({workPointId: '1848968432584933377'});
        this.monitorList = data.monitorPointList
      },
      //控制地图数据
      changeTypes(value) {
        this.$refs.map.refresh(value)
      },
      addData(data) {
        let count = this.count
        let echart13 = {} //振动计
        let echart8 = {} //倾角计
        let echart3 = {} //激光仪
        let echart10 = {} //温湿度计
        let sampleTime = '' //采集时间
        let obj = []
        if (data.sn && data.sn === 'ZDJ2201002') {
          sampleTime = new Date(data.time).getTime();
          let dataList = data.ZDJ[0].data || []
          let xg = [];
          let yg = [];
          let zg = [];
          for (let i = 0; i < dataList.length; i++) {
            sampleTime += 8
            xg.push([sampleTime, dataList[i]])
            if (i === dataList.length - 1) {
              echart13.xg = xg
              // echart13.yg = yg
              // echart13.zg = zg
              obj = [
                {type: 13, data: echart13},
              ]
              this.$refs[`modelItem13`][0].addData(13, echart13, sampleTime)
            }
          }
        } else {
          echart8 = data.ACC[0] //倾角计
          echart3 = data.JGY[0] //激光仪
          echart10 = data.SWJ[0] //温湿度计
          this.humi = Math.round(echart10.humi)
          this.temp = Math.round(echart10.temp)
          sampleTime = new Date().getTime();
          obj = [
            {type: 3, data: echart3},
            {type: 8, data: echart8},
            {type: 10, data: echart10},
          ]
          obj.map(x => {
            this.$refs[`modelItem${x.type}`][0].addData(x.type, x.data, sampleTime)
          })
        }
      },
      getNewData() {
        if ('WebSocket' in window) {
          let userId = 'TY2247380ZDJ2201002'
          let ws = new WebSocket(`wss://www.jgbpy.com:443/webSocket/push/${userId}`)
          ws.onopen = function () {
            console.log('websocket 连接上')
          }// 连接
          let that = this
          ws.onmessage = function (evt) {
            let data = JSON.parse(evt.data)
            let infoData = JSON.parse(data.json)
            console.log('--------------------------666')
            console.log(infoData)
            console.log('--------------------------666')
            that.addData(infoData)
          }// 接收消息
          ws.onclose = function (e) { // 监听关闭
            console.log(e)
            ws.close()
            console.log('连接已关闭...')
          }
          ws.onerror = function (err) {
            // console.log(err)
          }
        } else {
          // 浏览器不支持 WebSocket
          Message({
            type: 'warning',
            message: '您的浏览器不支持 WebSocket!'
          })
        }
      },
    },
    mounted() {
      this.openApiWorkPointInfo()
      this.getNewData()
    },
  }
</script>

<style lang="less" scoped>
  //项目控制台
  .board_project {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden;

  }

  .board {
    position: relative;
    width: 100vw;
    height: 100vh;

    .board_header {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      top: 0;
      left: 0;
      z-index: 1;
      height: 8vh /* 102/16 */;
      line-height: 8vh;
      /*background-image: url('./imgs/header.png');*/
      background-size: 100% 100%;
      padding-top: 1vh /* 23/16 */;

      & > em, .el-button {
        font-weight: 600;
        letter-spacing: 5px;
        font-size: 2.75rem /* 44/16 */;
        /*line-height: 3.875rem !* 62/16 *!;*/
        background-image: -webkit-linear-gradient(top, #115ef5, #efefef);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }

    .board_project_header {
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      height: 3.375rem /* 102/16 */;
      background-image: url('./3D-model/imgs/header.png');
      background-size: 100% 100%;
      text-align: center;

      & > em, .el-button {
        font-weight: 600;
        font-size: 1.75rem;
        line-height: 2.475rem;
        background-image: -webkit-linear-gradient(top, #82a8f2, #1b1b1b);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }
</style>


<style lang="less">
  .board {
    overflow: hidden;
    background-color: #1b1b1b;

    .el-col-12 {
      margin-bottom: 10px;
    }
  }

  .tabs {
    position: absolute;
    bottom: 50px;
    box-sizing: border-box;
    padding: 0 10px;
    /*background: red;*/
    width: 100%;
    height: 80px;
  }

  .temo_humi {
    border-bottom: 1px solid #1b1b1b;
    padding: 10px 0;
    font-size: 20px;
    color: #ffffff;
    margin-bottom: 10px;
    font-family: YouSheBiaoTiHei;
  }
</style>
